<template>
  <div class="flex flex-row items-center justify-between space-y-0 pb-2">
    <list v-if="currentProjectId === 0" @change-project="changeProject" />
    <task v-else :project-id="currentProjectId" @go-back="goBack" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import List from "./components/List.vue";
import Task from "./components/Task.vue";

const currentProjectId = ref<number>(0);
const changeProject = (id: number, _: string) => {
  currentProjectId.value = id;
};

const goBack = () => {
  currentProjectId.value = 0;
};
</script>

<style scoped>
.csProItem img {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.shadow-card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 添加阴影效果 */
}

.footer {
  padding: 10px;
}
</style>
